<!--
  @Name: pageForm
  @Description: 表单组件
  @Author: huangcy@zlsoft.cn
  @CreateDate: 2023/6/28
 -->
<template>
  <el-form :model="data" :label-width="labelWidth||'80px'">
    <el-form-item
      v-for="({label,prop,type,disable},index) in formFormat"
      :key="index"
      :label="label"
      :prop="prop"
    >
      <el-input v-if="type === 'input'" v-model="data[prop]" type="text" style="width: 100%" :disabled="disable"
                :placeholder="'请输入' + label"/>
      <el-input v-else-if="type === 'textArea'" v-model="data[prop]" type="textarea" style="width: 100%"
                :disabled="disable"
                :placeholder="'请输入' + label"/>
      <el-input v-else-if="type === 'inputNumber'" v-model="data[prop]" style="width: 100%"
                :disabled="disable"
                oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                :placeholder="'请输入' + label"/>
      <el-date-picker
        v-else-if="type === 'date'"
        v-model="data[prop]"
        type="date"
        value-format="yyyy-MM-dd HH:mm:SS"
        :placeholder="'请选择' + label"
        :disabled="disable"
        style="width: 100%"
      />
      <el-image
        v-else-if="type === 'image'"
        :src="data[prop]?JSON.parse(data[prop])[0]:''"
        style="width: 100%;height: 100px"
        :preview-src-list="data[prop]?JSON.parse(data[prop]):[]"
        fit="contain"
      />
      <div v-else-if="type === 'imageUpload'">
        <el-upload
          ref="pictureUpload"
          class="upimg"
          :action="upload.url"
          :headers="upload.headers"
          list-type="picture-card"
          :show-file-list="false"
          :on-success="handleSuccess"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <div class="image-box">
          <el-image
            v-for="(item,index) in upload.imgList"
            :key="index"
            :src="item||''"
            fit="contain"
            :preview-src-list="upload.imgList"
          />
        </div>
      </div>
      <el-select
        v-else-if="type === 'select'"
        v-model="data[prop]"
        style="width: 100%"
        :disabled="disable"
        :placeholder="'请选择' + label"
      >
        <el-option
          v-for="({label,value},index) in option(prop,dict)"
          :key="value+'-'+index"
          :label="label"
          :value="value"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
import { getToken } from "@/utils/auth";

export default {
  props: ['formData', 'formFormat', 'labelWidth'],
  dicts: ['t_jst_goods_type', 't_jst_goods_level', 't_jst_goods_size'],
  data() {
    return {
      data: {},
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: getToken() },
        // 上传的地址
        url: '',
        // 上传的文件列表
        fileList: [],
        imgList: []
      },
    }
  },
  computed: {
    option() {
      return (prop, dict) => {
        const arr = {
          goodsLevel: dict.t_jst_goods_level,
          goodsType: dict.t_jst_goods_type,
          goodsSize: dict.t_jst_goods_size
        }
        return prop ? arr[prop] || [] : []
      }
    }
  },
  watch: {
    formData: {
      handler(val) {
        this.upload.url = window.location.href.split('/').slice(0, 3).join('/') + '/api/common/uploadImageToFixedSize'
        this.data = JSON.parse(JSON.stringify(val || {}))
        this.upload.imgList = JSON.parse(this.data.goodsImageUrl)
      }, immediate: true, deep: true
    }
  },
  methods: {
    /**
     * 上传图片
     * @param res
     */
    handleSuccess(res) {
      if (res.status === 200) {
        this.$message.success(res.msg)
        if (!this.data.goodsImageUrl) {
          this.upload.imgList = []
          this.upload.imgList.push(res.data.path)
        } else {
          this.upload.imgList.push(res.data.path)
        }
        this.$set(this.data, 'imageUrl', this.upload.imgList)
      } else {
        this.$message.error(res.msg)
        let i = this.$refs.pictureUpload.uploadFiles.length - 1
        this.$refs.pictureUpload.uploadFiles.splice(i, 1)
      }
    },
  }
}
</script>
<style scoped lang="scss">
.el-form {
  width: 100%;
  padding-right: 10px;

  ::v-deep .image-box {
    display: flex;
    overflow: auto;
    width: 100%;

    .el-image {
      width: 50px;
      height: 50px;
      flex-shrink: 0;
    }
  }
}
</style>
